/** @odoo-module **/
class CustomHeader {
    init(agParams) {
        this.agParams = agParams;
        this.owl = agParams.context.owl_widget;
        this.eGui = document.createElement('div');
        this.eGui.className = 'd-flex align-items-center';
        this.eGui.style = 'justify-content: space-between;width:100%';
        let _html =  `<div class="customHeaderLabel">${this.agParams.displayName}</div>`;
        let fillColor = '#71639e';
        //
        if((agParams.column.colId == 'totalSalesAmount'||agParams.column.colId == 'totalCostAmount') && (this.agParams.displayName+'') != '0'){
            _html += `<div class="customHeaderMenuButton">`;
            _html+=`<svg style="vertical-align: middle;fill: currentColor;overflow: hidden;cursor: pointer" t="1689162163405" class="iconBtn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1554" width="18" height="18" data-spm-anchor-id="a313x.7781069.0.i3"><path d="M819.2 0H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v750.933334a136.533333 136.533333 0 0 0 136.533333 136.533333h614.4a136.533333 136.533333 0 0 0 136.533333-136.533333V136.533333a136.533333 136.533333 0 0 0-136.533333-136.533333z m68.266667 887.466667a68.266667 68.266667 0 0 1-68.266667 68.266666H204.8a68.266667 68.266667 0 0 1-68.266667-68.266666V136.533333a68.266667 68.266667 0 0 1 68.266667-68.266666h614.4a68.266667 68.266667 0 0 1 68.266667 68.266666z" fill="" p-id="1555"></path><path d="M735.914667 273.066667h-307.2a34.133333 34.133333 0 0 0 0 68.266666h307.2a34.133333 34.133333 0 0 0 0-68.266666zM735.914667 477.866667h-307.2a34.133333 34.133333 0 0 0 0 68.266666h307.2a34.133333 34.133333 0 0 0 0-68.266666zM735.914667 682.666667h-307.2a34.133333 34.133333 0 0 0 0 68.266666h307.2a34.133333 34.133333 0 0 0 0-68.266666zM313.344 273.066667h-25.258667a34.133333 34.133333 0 0 0 0 68.266666h25.941334a34.133333 34.133333 0 0 0 0-68.266666zM313.344 477.866667h-25.258667a34.133333 34.133333 0 0 0 0 68.266666h25.941334a34.133333 34.133333 0 0 0 0-68.266666zM313.344 682.666667h-25.258667a34.133333 34.133333 0 0 0 0 68.266666h25.941334a34.133333 34.133333 0 0 0 0-68.266666z" fill="${fillColor}" p-id="1556"></path></svg>`;
            _html += `</div>`;
        }

        this.eGui.innerHTML = _html;
        if((agParams.column.colId == 'totalSalesAmount'||agParams.column.colId == 'totalCostAmount') && (this.agParams.displayName+'') != '0'){
            this.eMenuButton = this.eGui.querySelector(".customHeaderMenuButton");
            this.onMenuClickListener = this.onMenuClick.bind(this);
            this.eMenuButton.addEventListener('click', this.onMenuClickListener);
        }

    }
    getGui() {
        return this.eGui;
    }

    onMenuClick() {
        if(this.agParams.column.colId == 'totalSalesAmount'){
            this.owl.openSalesModal();
        }
        if(this.agParams.column.colId == 'totalCostAmount'){
            this.owl.openCostModal();
        }
    }


    destroy() {
        if (this.onMenuClickListener) {
            this.eMenuButton.removeEventListener('click', this.onMenuClickListener)
        }
    }
}
export default CustomHeader
